<template>
  <div id="app">
    <!-- <dq-Header class="header-fixed" /> -->
    <router-view/>
    <!-- <van-tabbar class="jy-tabbar" @change="changeTabs" v-if="tabIsShow" v-model="active" active-color="#D4B686" v-bind:class="disc?'van-tabbar-ab':'van-tabbar-fix'"> -->
    <van-tabbar class="jy-tabbar" @change="changeTabs" v-if="tabIsShow" v-model="active" active-color="#D4B686">
      <van-tabbar-item icon="home-o" @change="changeTabs" to="/">
        <span>预警</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.wrongSel : icon.wrong"
        >
      </van-tabbar-item>
      <van-tabbar-item icon="search" @change="changeTabs" to="/dataInfo">
        <span>数据</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.datasSel : icon.datas"
        >
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" @change="changeTabs" to="/opinion">
        <span>舆情</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.opinionSel : icon.opinion"
        >
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" @change="changeTabs" to="/statute">
        <span>法规</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.lowerSel : icon.lower"
        >
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import router from '@/router';
import { mapGetters, mapActions } from 'vuex';
import IngotCookie from '@/utils/cookie.js';
import Header from '@/components/Header';
import { Tabbar, TabbarItem } from 'vant';

export default {
  name: 'app',
  components: {
    'dq-Header':Header
  },
  data() {
    return {
        navs:['预警', '数据', '舆情', '法规'],
        docmHeight: document.documentElement.clientHeight,   //一开始的屏幕高度
        showHeight: 0,
        disc: false, //实时屏幕高度
        isResize:false, //默认屏幕高度是否已获取
        // title: '预警',
        fisrt:true,
        active: 0,
        icon: {
          wrong: require('./assets/warng.png'),
          wrongSel: require('./assets/warng-sel.png'),
          datas: require('./assets/datas.png'),
          datasSel: require('./assets/datas-sel.png'),
          opinion: require('./assets/opinion.png'),
          opinionSel: require('./assets/opinion-sel.png'),
          lower: require('./assets/lower.png'),
          lowerSel: require('./assets/lower-sel.png'),
          active: require('./assets/warng-sel.png')
        }
    }
  },
  computed:{
    ...mapGetters([
      'get_source',
      'get_device_id',
      'get_user_id',
      'get_sign',
      'get_market',
      'get_token'
    ]),
    tabIsShow() {
      return (this.$store.state.top_title!=='用户协议' 
      && this.$store.state.top_title!=='服务详情' 
      && this.$store.state.top_title!=='资讯详情'
      && this.$store.state.top_title!=='活动'
      && this.$store.state.top_title!=='用户定制化'
      && this.$store.state.top_title!=='订阅协议'
      && this.$store.state.top_title !=='E互动')
    }
  },
  created() {
    // this.$store.commit('set_top_title',this.title);
    if(this.fisrt){
      this.ac_source(this.getUrlStr('source'))
      this.ac_device_id(this.getUrlStr('device_id'))
      this.ac_user_id(this.getUrlStr('user_id'))
      this.ac_sign(this.getUrlStr('sign'))
      this.ac_market(this.getUrlStr('market'))
      this.ac_token(this.getUrlStr('token'))
      this.fisrt = false
    }
    // console.log("source",IngotCookie.get('source'))
  },
  mounted() {
    // 检测屏幕高度变化
    // const that = this,
    // onresize = () => {
    //   return (() => {
    //     // if (!this.isResize) {
    //     //   //默认屏幕高度
    //     //   // this.docmHeight = document.documentElement.clientHeight,
    //     //   this.isResize = true
    //     // }
    //     //实时屏幕高度
    //     this.showHeight = document.documentElement.clientHeight
    //   })()
    // }
  },
  // watch: {
  //   showHeight:function() {
  //     if(this.docmHeight > this.showHeight){
  //       this.disc=true
  //       console.log("屏幕变化",this.showHeight)
  //     }else{
  //       this.disc=false
  //       console.log("屏幕还原",this.showHeight)
  //     }
  //   }
  // },
  methods: {
     ...mapActions([
      'ac_source',
      'ac_device_id',
      'ac_user_id',
      'ac_sign',
      'ac_market',
      'ac_token'
    ]),
    changeTabs(e){
      console.log("active === ", this.active, this.navs[this.active]);
      const name = this.navs[this.active];
      // 通知客户端改title
      console.log('正在通知客户端title改成：' + name);
      if(IngotCookie.get('source')=='ios'){
        console.log('ios客户端...');
        window.webkit.messageHandlers.NoticeSelectedTabbar.postMessage(name);
      } else if(IngotCookie.get('source')=='android'){
        console.log('安卓客户端..');
        window.AndroidWebView.NoticeSelectedTabbar(name);
      }
    },
    getUrlStr(name) {
      // console.log("name",name);
      var url = document.location.toString();
    　var arrObj = url.split("?");
  　　　if (arrObj.length > 1) {
  　　　　　var arrPara = arrObj[1].split("&");
  　　　　　var arr;
  　　　　　for (var i = 0; i < arrPara.length; i++) {
  　　　　　　　arr = arrPara[i].split("=");
  　　　　　　　if (arr != null && arr[0] == name) {
  　　　　　　　　　return arr[1];
  　　　　　　　}
  　　　　　}
  　　　　　return "";
  　　　}
  　　　else { return "" }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #fff;
  /* margin-top: 60px; */
}
.van-tabbar-item {
    color: #AEB0BC !important;
}
.van-tabbar-item--active {
    color: #D4B686 !important;
    font-weight: bold;
}
.van-tabs__line {
    background-color: #D4B686 !important;
}
.van-tabbar-item__icon img {
    height: 24px !important;
}
.van-tabbar-fix {
  position: fixed !important;
}
.van-tabbar-ab {
  position: absolute !important; 
}
.jy-tabbar{
  z-index: 999 !important;
}
</style>
